<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .upload-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px dashed #ddd;
            border-radius: 8px;
            text-align: center;
        }
        .upload-section:hover {
            border-color: #007bff;
        }
        .file-input {
            margin: 10px 0;
        }
        .btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .image-preview {
            margin-top: 20px;
            text-align: center;
        }
        .image-preview img {
            max-width: 300px;
            max-height: 300px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .image-list {
            margin-top: 30px;
        }
        .image-item {
            display: inline-block;
            margin: 10px;
            text-align: center;
        }
        .image-item img {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .image-item p {
            margin: 5px 0;
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片上传测试页面</h1>
        
        <!-- 单张图片上传 -->
        <div class="upload-section">
            <h3>单张图片上传</h3>
            <input type="file" id="singleFile" accept="image/*" class="file-input">
            <br>
            <button onclick="uploadSingleImage()" class="btn">上传图片</button>
            <div id="singleResult" class="result" style="display: none;"></div>
            <div id="singlePreview" class="image-preview"></div>
        </div>

        <!-- 批量图片上传 -->
        <div class="upload-section">
            <h3>批量图片上传</h3>
            <input type="file" id="multipleFiles" accept="image/*" multiple class="file-input">
            <br>
            <button onclick="uploadMultipleImages()" class="btn">批量上传</button>
            <div id="multipleResult" class="result" style="display: none;"></div>
            <div id="multiplePreview" class="image-preview"></div>
        </div>

        <!-- 图片列表 -->
        <div class="upload-section">
            <h3>已上传的图片</h3>
            <button onclick="loadImageList()" class="btn">刷新列表</button>
            <button onclick="deleteAllImages()" class="btn btn-danger">删除所有图片</button>
            <div id="imageList" class="image-list"></div>
        </div>
    </div>

    <script>
        const API_BASE = '/api/FileUpload';

        async function uploadSingleImage() {
            const fileInput = document.getElementById('singleFile');
            const resultDiv = document.getElementById('singleResult');
            const previewDiv = document.getElementById('singlePreview');

            if (!fileInput.files[0]) {
                showResult(resultDiv, '请选择图片文件', false);
                return;
            }

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            try {
                const response = await fetch(`${API_BASE}/upload-image`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                
                if (result.success) {
                    showResult(resultDiv, result.message, true);
                    showImagePreview(previewDiv, result.data.fileUrl, result.data.fileName);
                } else {
                    showResult(resultDiv, result.message, false);
                }
            } catch (error) {
                showResult(resultDiv, '上传失败: ' + error.message, false);
            }
        }

        async function uploadMultipleImages() {
            const fileInput = document.getElementById('multipleFiles');
            const resultDiv = document.getElementById('multipleResult');
            const previewDiv = document.getElementById('multiplePreview');

            if (!fileInput.files.length) {
                showResult(resultDiv, '请选择图片文件', false);
                return;
            }

            const formData = new FormData();
            for (let i = 0; i < fileInput.files.length; i++) {
                formData.append('files', fileInput.files[i]);
            }

            try {
                const response = await fetch(`${API_BASE}/upload-images`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                
                if (result.success) {
                    showResult(resultDiv, result.message, true);
                    showMultipleImagePreview(previewDiv, result.data);
                } else {
                    showResult(resultDiv, result.message, false);
                }
            } catch (error) {
                showResult(resultDiv, '上传失败: ' + error.message, false);
            }
        }

        async function loadImageList() {
            const listDiv = document.getElementById('imageList');
            
            try {
                const response = await fetch(`${API_BASE}/list`);
                const result = await response.json();
                
                if (result.success) {
                    displayImageList(listDiv, result.data);
                } else {
                    listDiv.innerHTML = '<p>获取图片列表失败</p>';
                }
            } catch (error) {
                listDiv.innerHTML = '<p>获取图片列表失败: ' + error.message + '</p>';
            }
        }

        async function deleteImage(fileName) {
            if (!confirm('确定要删除这张图片吗？')) return;

            try {
                const response = await fetch(`${API_BASE}/delete-image/${fileName}`, {
                    method: 'DELETE'
                });

                const result = await response.json();
                
                if (result.success) {
                    alert('删除成功');
                    loadImageList();
                } else {
                    alert('删除失败: ' + result.message);
                }
            } catch (error) {
                alert('删除失败: ' + error.message);
            }
        }

        async function deleteAllImages() {
            if (!confirm('确定要删除所有图片吗？')) return;

            const listDiv = document.getElementById('imageList');
            const images = listDiv.querySelectorAll('.image-item');
            
            for (let image of images) {
                const fileName = image.dataset.filename;
                if (fileName) {
                    try {
                        await fetch(`${API_BASE}/delete-image/${fileName}`, {
                            method: 'DELETE'
                        });
                    } catch (error) {
                        console.error('删除图片失败:', error);
                    }
                }
            }
            
            alert('删除完成');
            loadImageList();
        }

        function showResult(element, message, isSuccess) {
            element.textContent = message;
            element.className = `result ${isSuccess ? 'success' : 'error'}`;
            element.style.display = 'block';
        }

        function showImagePreview(container, imageUrl, fileName) {
            container.innerHTML = `
                <h4>上传成功</h4>
                <img src="${imageUrl}" alt="${fileName}" style="max-width: 300px; max-height: 300px;">
                <p>文件名: ${fileName}</p>
                <p>访问地址: <a href="${imageUrl}" target="_blank">${imageUrl}</a></p>
            `;
        }

        function showMultipleImagePreview(container, images) {
            let html = '<h4>批量上传成功</h4>';
            images.forEach(image => {
                html += `
                    <div style="display: inline-block; margin: 10px; text-align: center;">
                        <img src="${image.fileUrl}" alt="${image.fileName}" style="width: 150px; height: 150px; object-fit: cover;">
                        <p>${image.fileName}</p>
                    </div>
                `;
            });
            container.innerHTML = html;
        }

        function displayImageList(container, images) {
            if (images.length === 0) {
                container.innerHTML = '<p>暂无图片</p>';
                return;
            }

            let html = '';
            images.forEach(image => {
                html += `
                    <div class="image-item" data-filename="${image.fileName}">
                        <img src="${image.fileUrl}" alt="${image.fileName}">
                        <p>${image.fileName}</p>
                        <p>大小: ${formatFileSize(image.fileSize)}</p>
                        <p>上传时间: ${new Date(image.uploadTime).toLocaleString()}</p>
                        <button onclick="deleteImage('${image.fileName}')" class="btn btn-danger">删除</button>
                    </div>
                `;
            });
            container.innerHTML = html;
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 页面加载时自动加载图片列表
        window.onload = function() {
            loadImageList();
        };
    </script>
</body>
</html> 